
<template>
    <router-link to="/details">
        <div class="videos_header">
            <div class="videos" v-for="(item,index) in dataList" :key="index">
                <img :src="item.cover">
                <div class="info-box">

                    <div> {{item.title}}</div>

                    <div class="price-box" style="margin: 10px 10px">
                        <div class="view-number">{{item.statisticsBackup.viewCount}}人浏览</div>
                    </div>

                    <div class="stars" >
                        <span class="iconfont icon-dianzan">{{item.statisticsBackup.praiseCount}}</span>
                        <span class="iconfont icon-xiaoxi1">{{item.statisticsBackup.commentCount}}</span>
                        <span class="iconfont icon-shoucang">{{item.statisticsBackup.favoriteCount}}</span>

                    </div>
                </div>
                <div class="author">
                    <div class="left">
                        <el-avatar :size="24" :src="item.creatorBackup.avatar" />
                        <span class="name">{{item.creatorBackup.name}}</span>
                    </div>
                    <span>{{item.creatorBackup.name}}</span>
                </div>
            </div>
        </div>
    </router-link>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { UserFilled } from '@element-plus/icons-vue'
type Props={
  dataList:[]
}
const currentDate = ref(new Date())
defineProps<Props>()

// console.log('props===',videoMsgList.value)
</script>

<style scoped lang="less">
.videos_header{
  display: flex;
  flex-flow: row wrap;
  margin-top: 20px;
  .videos{
    width: 224px;
    height: 300px;
    justify-content:flex-start;
    margin-bottom: 20px;
    background-color: #fff;
    &:not(:nth-child(5n)) {
      margin-right: 20px;
    }
    > img {
      width: 100%;
    }

    .info-box {
      padding: 10px 10px 5px;
      border-bottom: 1px solid #ebeced;
      > a {
        display: block;
        font-size: 14px;
      }
      .price-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .price {
          color: #f93684;
        }
        .view-number {
          color: #b1b5c1;
          font-size: 12px;
        }
      }

      .stars {
        margin-left: 0;
        color: #b1b5c1;
        > span {
          padding-right: 18px;
          font-size: 12px;
        }
      }
    }
    .author {
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      font-size: 12px;
      > span {
        color: #b1b5c1;
      }
      .left {
        display: flex;
        align-items: center;
        .name {
          margin-left: 8px;
          max-width: 68px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }

  }
}
</style>
